<template>
	<view class="border-top p-2">
		<view class="card px-25">
			<view class="py-2 flex justify-between border-bottom">
				<view class="font28 color999 font-weight-500" style="width: 150rpx;">修改姓名</view>
				<view class="flex-column">
					<view class="flex align-center" v-for="(item, index) in userList" :key="index"
						@click="changeIndex(index)">
						<view class="font28 color333 font-weight-500 mr-3">{{ item.user_name }}</view>
						<image src="../../../static/img/ic_checked.png" style="width: 26rpx;height: 26rpx;"
							v-if="index == subindex" mode=""></image>
						<image src="../../../static/img/ic_uncheck.png" style="width: 26rpx;height: 26rpx;" v-else
							mode=""></image>
					</view>
				</view>
			</view>
			<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
				<view class="font28 color999 font-weight-500" style="width: 150rpx;">联系人称呼</view>
				<view class="font28 color333 font-weight-500"><input type="text" :value="names" @input="userName"
						class="text-right" placeholder="号码备注" /></view>
			</view>
			<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
				<view class="font28 color999 font-weight-500" style="width: 150rpx;">手机号码</view>
				<view class="font28 color333 font-weight-500"><input type="number" :value="phone_number" @input="phone"
						class="text-right" placeholder="手机号码" /></view>
			</view>
			<view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
				<view class="font28 color999 font-weight-500" style="width: 150rpx;">键位</view>
				<view class="font28 color333 font-weight-500">
					<!-- <input type="number" :value="presskey" @input="press" class="text-right" placeholder="键位号码" /> -->

					<view class="font30 color666" v-if="array==''">(仅限呼出)</view>
					<view class="" v-else>
						<picker @change="pickerCode" :value="index" :range="array">
							<view class="" v-if="presskey==''">请选择</view>
							<view v-else class="uni-input font30 color666">{{ presskey }}</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- <view class="flex justify-between align-center border-bottom" style="height: 90rpx;">
				<view class="font28 color999 font-weight-500">优先级</view>
				<view class="font28 color333 font-weight-500"><input type="number" :value="level" @input="levels" class="text-right" placeholder="优先级号码" /></view>
			</view> -->
		</view>
		<view class="fixed-bottom px-2 mb-5">
			<main-button @click="submit">保存</main-button>
		</view>
	</view>
</template>

<script>
	import mainButton from '../../../components/common/main-buttom.vue';
	export default {
		components: {
			mainButton
		},
		data() {
			return {
				subindex: 0,
				names: '',
				phone_number: '',
				presskey: '',
				level: '1',
				userList: [],
				array: [],
				codekey: "",
				index: "",
				ids: ""
			};
		},
		onLoad(options) {
			this.getData()
			// this.getUserInfo();
			this.userList = uni.getStorageSync('userInfo').class_info;
			if (options.type == 1) {
				let info = uni.getStorageSync('whiteItem');
				console.log(info)
				this.names = info.remark;
				this.phone_number = info.phone_number;
				this.presskey = info.pressKey;
				this.ids = info.id;
				this.userList.forEach((item, index) => {
					if (item.user_name == info.userName) {
						this.subindex = index
					}
				})
			}
		},
		methods: {
			pickerCode(e) {
				console.log(e)
				this.index = e.target.value;
				this.presskey = this.array[e.target.value]
			},
			changeIndex(index) {
				this.subindex = index;
				this.getData()
			},
			getData() {
				let _this = this;
				let opts = {
					url: 'Jz/SearchThbmd.shtml'
				};
				let param = {};
				_this.$http.httpTokenRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							let list = res.data.data;
							let arr = ['1', '2', '3', '4'];
							let keylist=[];
							let arr1 = [];
							list.forEach((item) => {
								if(item.user_name==this.userList[this.subindex].user_name){
									keylist.push(item)
								}
							})
							arr.forEach((item) => {
								let flag = keylist.some(items => {
									if (item == items.pressKey) {
										return true
									}
								});
								if (!flag) {
									arr1.push(item)
								}
							})

							console.log(arr1)
							this.array = arr1;
							// if (this.presskey == null) {
							// 	this.presskey = this.array[0]
							// }
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			getUserInfo() {
				let _this = this;
				let opts = {
					url: 'UserInfo.shtml'
				};
				let param = {
					token: uni.getStorageSync('userInfo').token
				};
				_this.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							_this.userList = res.data.data.class_info;
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			userName(e) {
				this.names = e.target.value;
			},
			phone(e) {
				this.phone_number = e.target.value;
			},
			press(e) {
				if (e.target.value > 0 && e.target.value < 5) {
					this.presskey = e.target.value;
				} else {
					uni.showToast({
						icon: 'none',
						title: '键位号为1~4'
					});
				}
			},
			levels(e) {
				if (e.target.value > 0 && e.target.value < 13) {
					this.level = e.target.value;
				} else {
					uni.showToast({
						icon: 'none',
						title: '优先级号为1~12'
					});
				}
			},
			submit() {
				let _this = this;
				let opts = {
					url: 'Jz/SaveQqhm.shtml'
				};
				let param = {
					token: uni.getStorageSync('userInfo').token,
					userId: uni.getStorageSync('userInfo').userId,
					jz_id: uni.getStorageSync('userInfo').user_id,
					user_id: _this.userList[_this.subindex].user_id,
					id: _this.ids,
					name: _this.names,
					phone_number: _this.phone_number,
					presskey: _this.presskey,
					level: _this.level,
					imei: _this.userList[_this.subindex].imei
				};
				_this.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							let pages = getCurrentPages(); //获取所有页面栈实例列表
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.getData(); //修改上一页data里面的searchVal参数值为1211
							uni.navigateBack({
								//uni.navigateTo跳转的返回，默认1为返回上一级
								delta: 1
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			}
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.card {
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
	}
</style>
